<template>
  <div class="details">
    <el-form label-width="100px">
      <el-form-item label="标题">
        <el-input v-model="params.title" placeholder="请输入标题，100以内"></el-input>
      </el-form-item>
      <el-form-item label="资讯分类">
        <el-select class="btn" v-model="params.newsType" placeholder="资讯分类">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详情">
        <Tinymce ref="editor" :height="400" v-model="params.content"/>
      </el-form-item>
      <el-form-item>
        <el-button @click='add' type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import { ajax } from "@/api";
import { parseTime } from "@/utils";
import { getToken } from "@/utils/auth";
import Tinymce from "@/components/Tinymce";
export default {
  name: "informationDetails",
  data() {
    return {
      projectImagesStatus:false,
      projectImagesSmailStatus:false,
      uploadAction: process.env.BASE_API + "file.upload",
      params: {
        newsId: "",
        newsType: "",
        title: "",
        content: "",
        source: "source",
        bigCoverImage: "",
        smallCoverImage: "",
        hot: false,
        queue: "",
        token: getToken()
      },
      options: [
        // {
        //   text: "资讯类",
        //   value: "normal"
        // },
        {
          text: "公告类",
          value: "notice"
        },
        // {
        //   text: "连接类",
        //   value: "hidden"
        // }
      ],
      paramsDetails:{
        targetId:''
      }
    };
  },
  methods: {
    //资讯详情
    getInfomation(){
      this.paramsDetails.targetId = this.$route.params.bulletinId;
      ajax('newsDetail',this.paramsDetails).then(res => {
        if(res.data.status){
          this.params =  {
            newsId: res.data.data.id,
            newsType: res.data.data.type.value,
            title: res.data.data.info.title,
            content: res.data.data.info.content,
            source: res.data.data.info.source,
            bigCoverImage: res.data.data.info.bigCoverImage,
            smallCoverImage: res.data.data.info.smallCoverImage,
            hot: res.data.data.hot,
            queue: res.data.data.queue,
            token: getToken()
          };
          if(res.data.data.info.bigCoverImage !== ''){
            this.projectImagesStatus = true;
          }
          if(res.data.data.info.projectImagesSmailStatus !== ''){
            this.projectImagesSmailStatus = true;
          }
        }
      });
    },
    //新添加资讯 / 编辑
    add(){
      if(this.vails() === undefined){
        ajax('newsEdit',this.params).then((res) => {
            if(res.data.status){
              this.$message.success('保存成功');
              this.$router.go(-1);
            }else{
              this.$message.error(res.data.message);
            }
        });
      }
      
    },
    //判断
    vails(){
      if(this.params.title === ''){
        return this.$message.error('请输入标题');
      }
      if(this.params.newsType === ''){
        return this.$message.error('请选择资讯分类');
      }
      
      if(this.params.content === ''){
        return this.$message.error('请输入详情');
      }
    }
    
  },
  components: {
    Tinymce
  },
  mounted(){
    if(this.$route.params.bulletinId > 0){
      this.getInfomation();
    }
  }
};
</script>

<style lang="less" scoped>
.details {
  padding: 1rem;
  .voucher {
    display: flex;
    margin-top: 1rem;
    .voucherText {
      margin-left: 1rem;
      p {
        margin: 0;
      }
    }
  }
  .submit {
    margin: 1rem 0;
  }
  .imgListBig{
    margin: 1rem 0;
    div {
      width: 670px;
      height: 376px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      text-align: center;
      color: red;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .imgListSmail{
    margin: 1rem 0;
    div {
      width: 230px;
      height: 150px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>

